<template>
    <div class="container" ref="homeRef">
        <div class="home-header">
            <img :src="HomeTitle" alt="">
        </div>
        <div class="home-content">
            <div class="add-title">
                <span>{{ info.courseName }}</span>
            </div>
            <div class="master-container">
                <div class="one-box">
                    <div class="left-line"></div>
                    <div>
                        课程介绍：
                    </div>
                </div>
                <div class="content">{{ info.introduce }}</div>
                <div class="one-box">
                    <div class="left-line"></div>
                    <div>
                        课程体系: 
                    </div>
                </div>
                <div class="content">{{ info.courseSystem }}</div>
                <div class="one-box">
                    <div class="left-line"></div>
                    <div>
                        师资力量: 
                    </div>
                </div>
                <div class="content">{{ info.faculty }}</div>
                <div class="one-box">
                    <div class="left-line"></div>
                    <div>
                        报名条件：
                    </div>
                </div>
                <div class="content">{{ info.enrollCondition }}</div>
                <div class="one-box">
                    <div class="left-line"></div>
                    <div>
                        培训对象: 
                    </div>
                </div>
                <div class="content">{{ info.drillObject }}</div>
                <div class="one-box">
                    <div class="left-line"></div>
                    <div>
                        培训费用: 
                    </div>
                </div>
                <div class="content">{{ info.drillPrice }}</div>
                <div class="one-box">
                    <div class="left-line"></div>
                    <div>
                        证书颁发:
                    </div>
                </div>
                <div class="content">{{ info.certificate }}</div>
                <div class="one-box">
                    <div class="left-line"></div>
                    <div>
                        报名资料: 
                    </div>
                </div>
                <div class="img-p">
                    <img :src="info.enrollZl" alt="">
                </div>
                
                <!-- <div class="content">{{ info.enrollZl }}</div> -->
                <!-- <div class="one-box">
                        <div class="left-line"></div>
                        <div>
                            户名: <div></div>{{ info.accountName }}
                        </div>
                    </div> -->
                <!-- </div> -->
                <!-- 
                <div class="three">
                    <div class="one-box">
                        <div class="left-line"></div>
                        <div>
                            开户行: <div></div>{{ info.openBank }}
                        </div>
                    </div>
                    <div class="one-box">
                        <div class="left-line"></div>
                        <div>
                            账号: <div></div>{{ info.accountInfo }}
                        </div>
                    </div>
                    <div class="one-box">
                        <div class="left-line"></div>
                        <div>
                            汇款备注: <div></div>{{ info.moneyRemark }}
                        </div>
                    </div>
                </div> -->

                <!-- <div class="three"> -->
                
                <!-- </div> -->

            </div>
        </div>
    </div>
</template>
<script setup>
import HomeTitle from '@/assets/images/home-title.png'
import { onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import useResize from '@/hooks/useResize'
const { proxy } = getCurrentInstance();
const route = useRoute()
const homeRef = ref()
const headerH = ref('483px')
const info = ref({})
onMounted(() => {
    info.value = route.query
})
useResize(()=>{
    headerH.value = homeRef.value.clientWidth * (483/1920) + 'px'
})
</script>
<style lang="scss" scoped>
.container {
    min-width: 1200px;
    background-image: url("@/assets/images/add-bg.png");
    background-size: cover;
}

.home-header {
    // width: 100%;
    height: v-bind(headerH);
    // aspect-ratio: 1920/483;
    background-image: url("@/assets/images/add-header.png");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        margin-top: 90px;
        width: 40%;
        aspect-ratio: 787/68;
    }
}

.home-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .add-title {
        margin-bottom: 30px;
        margin-top: 40px;
        padding-top: 10px;
        width: 585px;
        height: 64px;
        background-image: url("@/assets/images/add-title-bg.png");
        background-size: cover;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        color: #298DFF;
    }
}

.master-container {
    width: 1100px;
    margin-bottom: 20px;
    background: #FFFFFF;
    box-shadow: 0px 13px 29px 0px rgba(0, 0, 0, 0.11);
    border-radius: 3px;
    padding: 20px;

    .one-box {
        width: 100%;
        display: flex;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 10px;

        .left-line {
            width: 5px;
            height: 20px;
            background: #298DFF;
            border-radius: 3px;
            margin-right: 6px;
        }

    }
}
.content{
    margin-left: 35px;
    margin-bottom: 30px;
    text-indent: 1cm;
    font-size: 15px;
    color: #666;
    line-height: 25px;
    word-wrap: break-word;
}

.three {
    display: flex;
}
.img-p{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
        width: 600px;
    }
}
</style>